<template>
    <div class="flex items-center justify-between">
        <div class="flex items-center">
            <div class="mr-2 overflow-hidden bg-white border-white rounded-full shrink-0" :class="classies[$props.size].avatar">
                <LazyImage :src="a" />
            </div>
            <div>
                <div class="font-medium text-gray-700 "  :class="classies[$props.size].name">
                    <slot name="name">
                        猫德学院
                    </slot>
                </div>
                <div class="text-xs text-gray-500">
                    <slot name="description">做猫，做好猫，做人人爱的小猫猫！</slot>
                </div>
            </div>
        </div>
        <div>
            <slot name="extend">
                <IGridicons:add class="text-2xl text-red-400" />
            </slot>
        </div>
    </div>
</template>
    
<script setup lang='ts'>
import a from '~/assets/circle/cat1.png'
const $props = withDefaults(
    defineProps<{
        size?: 'sm' | 'md' | 'lg'
    }>(),
    {
        size: 'md'
    }
)
const classies = {
    sm: {
        avatar: 'w-8 h-8',
        name: 'text-sm'
    },
    md: {
        avatar: 'w-10 h-10',
        name: 'text-base'
    },
    lg:{
        avatar: 'w-14 h-14',
        name: 'text-lg'
    }
}
</script>
    
<style></style>